<template>
	<view>
		<app-layout>
			<view class="nav">
				<view class="nav-title">可提现</view>
				<view class="nav-num">{{income.money?income.money:0}}元</view>
				<view class="nav-shop" @click="route('/plugins/mch_solitaire/profit/cash?money=' + income.money)">
					提现
				</view>
				<view class="exlog">
					<view class="log">
						<view>总收益</view>
						<view class="text">{{income.total_money?income.total_money:0}}元</view>
					</view>
					<view class="exchange">
						<view>已提现</view>
						<view class="text">{{detail.money?detail.money:0}}元</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
			<!-- </view> -->
			<view class="list dir-left-wrap">
				<view class="list-item">
					<view @click="route('/plugins/mch_solitaire/profit/income?uid='+uid)">
						<image :src="custom_setting.menus.order.icon"></image>
						<view>收入明细</view>
					</view>
				</view>
				<view class="list-item">
					<view @click="route('/plugins/mch_solitaire/profit/cash-detail')">
						<image :src="custom_setting.menus.cash.icon"></image>
						<view>提现明细</view>
					</view>
				</view>
				<!-- <view class="list-item">
					<view @click="route('/pages/share/qrcode/qrcode')">
						<image :src="custom_setting.menus.qrcode.icon"></image>
						<view>{{custom_setting.menus.qrcode.name}}</view>
					</view>
				</view> -->
			</view>
		</app-layout>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				detail: '',

				setting: null,
				status: -1,
				customize: [],
				name: null,
				first: false,
				page_loading: true,
				inApply: false,
				apply: false,
				template_message: null,
				index: [],
				order_price: null,
				goods_list: null,
				cat_list: null,
				share: null,
				stock: null,
				region: null,
				is_can_apply: false,
				uid: 0,
				income:''
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
				custom_setting: state => state.mallConfig.share_setting_custom,
				share_setting: state => state.mallConfig.share_setting,
				mall: state => state.mallConfig.mall
			}),
			percent() {
				if (this.order_price === null) {
					return 0;
				} else {
					return parseFloat(this.order_price) / parseFloat(this.share_setting.auto_share_val) * 100;
				}
			},
			condition() {
				if (this.share_setting.share_condition == 3) {
					return '自动';
				} else {
					return '申请';
				}
			},
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			})
		},
		onLoad(options) {
			this.uid = options.uid
			this.initApply()
		},
		onShow() {
			this.initprofit()
			this.getIncome()
		},
		methods: {
			initApply() {
				this.$request({
					url: this.$apiSol.share.new_apply_status,
				}).then(res => {
					if (res.data.status == 1) {} else {
						this.$request({
							url: this.$apiSol.share.apply,
							method: 'post'
						}).then(response => {
							console.log(response);
						}).catch(() => {

						});
					}
				})
			},
		async	getIncome(){
			const res = await this.$request({
				url:this.$apiSol.share.shouyi,
				method:'get',
				data:{
					user_id :this.uid
				}				
			})
			this.income = res.data.list
		},
			initprofit() {
				this.$request({
					url: this.$apiSol.solitaire.profit,
					user_id: this.uid
				}).then(res => {
					console.log(res);
					this.detail = res.data.list
				})
			},
			
			
			route(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		height: #{260rpx};
		width: 100%;
		position: relative;
		background: linear-gradient(90deg, #E4432E 0%, #E83F2E 100%);
		padding: 72rpx 72rpx 0;

		&::before {
			content: '';
			position: absolute;
			top: 260rpx;
			left: 0;
			width: 100%;
			height: 200rpx;
			background-color:  #E4432E ;
			border-radius: 0 0 800rpx 800rpx;
		}
	}

	.nav-bg {
		width: 100%;
	}

	.nav-title {
		width: 100%;
		// text-align: center;
		// position: absolute;
		// top: #{25rpx};
		// font-size: 28rpx;
		// line-height: 42rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		// color: #999;
		// font-size: 12px;
		margin-top: 30px;
	}

	.nav-num {
		// text-align: center;
		width: 100%;
		color: #FFFFFF;
		font-size: 72rpx;
		line-height: 108rpx;
		// position: absolute;
		// top: #{60rpx};
		// color: #ecb786;
		// font-size: 24px;
	}

	.nav-shop {
		text-align: center;
		width: 154rpx;
		height: 56rpx;
		// color: #FFFFFF;
		font-size: 28rpx;
		line-height: 56rpx;
		// background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
		background: #FFFFFF;
		// color: rgba(7, 163, 6, 0.09);
		color: rgba(7, 163, 6, 1);
		border-radius: 28px;
		position: absolute;
		right: 72rpx;
		top: 188rpx;
		// position: absolute;
		// top: #{60rpx};
		// color: #ecb786;
		// font-size: 24px;
	}

	.exlog {
		background-color: #FFFFFF;
		position: absolute;
		bottom: -220rpx;
		color: #342B2A;
		padding: 30rpx 0;
		width: 600rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;

	}

	.exchange,
	.log {
		// color: #fff;
		font-size: 15px;
		// height: #{34rpx};
		line-height: #{34rpx};
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* .exchange image,
	.log image {
		height: #{34rpx};
		width: #{34rpx};
		margin-right: #{16rpx};
		display: block;
		float: left;
	} */

	.exchange {
		// left: #{120rpx};

		.text {
			font-size: #{26rpx};
			color: #ff8f17;
			margin-top: 24rpx;
		}
	}

	.log {
		// right: #{120rpx};

		.text {
			font-size: #{26rpx};
			color: #22af19;
			margin-top: 24rpx;
		}
	}

	.info {
		height: #{312rpx};
		background-color: #ff4544;
		width: 100%;
		padding: #{20rpx} #{25rpx} 0;
		color: #fff;
		font-size: #{28rpx};
		background-repeat: no-repeat;
		background-size: #{750rpx} #{312rpx};
	}

	.user-info {
		border-bottom: #{1rpx} solid #FFFFFF;
		padding-bottom: #{20rpx};

		.arrow-right {
			width: #{12rpx};
			height: #{22rpx};
			margin-left: #{12rpx};
			display: block;
		}
	}

	.user-avatar {
		width: #{120rpx};
		height: #{120rpx};
		border-radius: 50%;
		font-size: #{26rpx};
		margin-right: #{40rpx};
	}

	.user-name {
		font-size: #{36rpx};
	}

	.mtb-10 {
		margin: #{10rpx 0};
	}

	.share-info {
		float: left;
		margin-top: #{20rpx};
		font-size: #{28rpx};
	}

	.share-info text {
		font-size: #{46rpx};
	}

	.withdraw-btn {
		float: right;
		width: #{105rpx};
		border-radius: #{28rpx};
		height: #{56rpx};
		line-height: #{54rpx};
		font-size: #{28rpx};
		color: #fff;
		background-color: auto;
		text-align: center;
		border: #{2rpx} solid #fff;
		padding: 0;
		margin-top: #{48rpx};
	}

	.withdraw-btn::after {
		border: 0;
	}

	.fnav {
		background-color: #fff;
		height: #{160rpx};
		padding: #{40rpx} 0;
		text-align: center;
		font-size: #{30rpx};
		color: #666;
		width: #{702rpx};
		margin: #{16rpx} auto 0;
		border-radius: #{10rpx};

		.nav-left {
			margin-left: #{-1rpx};
			border-right: #{1rpx} solid #bbb;
		}

		.nav-title {
			font-size: #{26rpx};
			color: #ff8f17;
			margin-bottom: #{10rpx};
		}

		.nav-left .nav-title {
			color: #22af19;
		}
	}

	.fnav>view {
		width: 50%;
		text-align: center;
	}



	.list {
		margin: #{72rpx} auto 0;
		background-color: #fff;
		width: #{702rpx};
		border-radius: #{10rpx};
	}

	.list-item {
		height: #{220rpx};
		width: #{234rpx};
		text-align: center;
		padding-top: #{57rpx};
		font-size: #{24rpx};
		color: #666;
	}

	.list-item image {
		height: #{61rpx};
		width: #{61rpx};
		vertical-align: top;
		margin-top: #{-10rpx};
		margin-bottom: #{28rpx};
	}

	.list-item text {
		color: #ff6868;
	}

	.list-item.no-border {
		border-bottom: 0;
	}

	.no-pass {
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		background-color: #fff;
		text-align: center;
		padding-top: #{150rpx};
		color: #666;
		font-size: #{30rpx};
	}

	.no-pass-img {
		height: #{240rpx};
		width: #{420rpx};
		margin-bottom: #{80rpx};
	}

	.no-pass-btn {
		height: #{80rpx};
		width: #{560rpx};
		border-radius: #{40rpx};
		margin: #{88rpx} auto 0;
		color: #fff;
		font-size: #{30rpx};
		line-height: #{80rpx};
		background: #ff4544;
	}

	.withdraw-btn:active {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.add-bg {
		height: #{300rpx};
		width: 100%;
		display: block;
		margin-bottom: #{20rpx};
		background-color: #f7f7f7;
	}

	.thx {
		padding: #{100rpx};
		text-align: center;
		color: #666;
		font-size: #{30rpx};
	}

	.thx image {
		height: #{80rpx};
		width: #{80rpx};
		margin-bottom: #{50rpx};
	}

	.submit {
		background-color: #f7f7f7;
		margin: 0 #{-24rpx};
		padding: #{24rpx};
	}

	.submit button {
		color: #fff;
		font-size: #{30rpx};
		font-weight: bold;
		height: #{100rpx};
		border-radius: #{50rpx};
		line-height: #{100rpx};
		background: #ff4544;
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 10;
	}

	.dialog {
		position: fixed;
		top: #{400rpx};
		left: 0;
		right: 0;
		height: #{300rpx};
		width: #{640rpx};
		margin: 0 auto;
		z-index: 21;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		font-size: #{30rpx};
	}

	.dialog-title {
		margin: #{40rpx} auto #{35rpx};
	}

	.dialog-btn {
		height: #{88rpx};
		width: #{640rpx};
		border-top: #{1rpx} solid #e2e2e2;
		line-height: #{88rpx};
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.dialog-close,
	.dialog-submit {
		width: 50%;
	}

	.line {
		height: #{44rpx};
		margin-top: #{22rpx};
		width: #{1rpx};
		background-color: #e2e2e2;
	}

	.dialog-submit {
		color: #ff4544;
	}

	.apply-status-4 {
		border-bottom: #{1rpx solid #e2e2e2};
		padding-bottom: #{32rpx};
		margin-bottom: #{32rpx};
		font-size: $uni-font-size-import-one;
		color: #353535;
	}

	.thx image.warning {
		width: #{160rpx};
		height: #{160rpx};
	}

	.again-apply {
		button {
			width: #{320rpx};
		}
	}

	.status-3 {
		background-color: #ffffff;
		min-height: 100vh;

		.submit {
			background-color: #ffffff;
			margin-top: #{160rpx};
			margin-left: 0;
			margin-right: 0;
		}
	}

	.apply-status-3 {
		padding: #{0 24rpx};
		margin-top: #{57rpx};

		.money {
			width: #{125rpx};
			height: #{100rpx};
			display: block;
		}

		.progress {
			width: #{470rpx};
			border-radius: #{5rpx};
			position: relative;

			.progress-content {
				position: absolute;
				top: -10rpx;
				z-index: 10;
				text-align: center;
				font-size: $uni-font-size-weak-one;

				.shuxian {
					width: #{2rpx};
					height: #{13rpx};
					border: #{1rpx solid #eeeeee};
				}

				.icon {
					width: #{35rpx};
					height: #{35rpx};
					display: block;
				}

				.q-price {
					color: #ff4544;

					&:before {
						content: '￥';
					}
				}
			}
		}

		.price {
			text-align: center;
			color: #999999;
			margin-left: #{20rpx};

			view:last-child {
				color: #ff4544;
			}
		}

		.content {
			text-align: center;
			color: #353535;
			font-size: #{35rpx};
			margin-top: #{47rpx};

			text {
				color: #ff4544;
				font-size: #{45rpx};
			}
		}
	}

	.share-goods-status-1 {
		.content {
			text-align: center;
			color: #353535;
			font-size: #{35rpx};
			margin-top: #{60rpx};
			margin-bottom: #{80rpx};

			text {
				color: #ff4544;
				font-size: #{45rpx};
			}
		}

		.goods-title {
			color: #a6a6a6;
			margin-top: #{36rpx};
			margin-bottom: #{34rpx};

			.border {
				width: #{40rpx};
				border: #{1rpx solid #a6a6a6};

				&:first-child {
					margin-right: #{24rpx};
				}

				&:last-child {
					margin-left: #{24rpx};
				}
			}

			image {
				width: #{24rpx};
				height: #{24rpx};
				display: block;
				margin-right: #{12rpx};
			}
		}
	}

	.cat-list {
		padding: #{0 24rpx};

		.cat-item {
			width: #{221rpx};
			padding: #{10rpx 27rpx};
			font-size: $uni-font-size-general-one;
			border-radius: #{30rpx};
			border: #{2rpx solid #e2e2e2};
			background-color: #ffffff;
			margin-right: #{18rpx};
			margin-bottom: #{34rpx};
			text-align: center;
		}
	}

	.disabled {
		padding-top: #{156rpx};

		.disabled-img {
			width: #{240rpx};
			height: #{237rpx};
			display: block;
		}

		.disabled-text {
			font-size: $uni-font-size-general-two;
			color: #999999;
			margin-top: #{62rpx};
		}

		.disabled-btn {
			margin-top: #{80rpx};
			width: #{320rpx};
			height: #{80rpx};
			font-size: $uni-font-size-import-two;
			color: #ffffff;
			background: #ff4544;
			border-radius: #{40rpx};
			text-align: center;
			line-height: #{80rpx};
		}
	}
</style>
